<template>
	<div class="product_con">
		<el-row>
			<el-col class="title-col" :span="24"
				><div class="grid-content bg-purple-dark product-title">
					<div><span class="iconfont">&#xe618;</span>数据列表</div>
					<div>
						<el-button
							style="margin-left:5px;"
							type="primary"
							v-if="parentId != 0"
							@click="goBackLevel"
							>返回上级节点</el-button
						>
						<el-button @click="addFun">添加</el-button>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-table
			:data="cateList"
			class="cateList"
			border
			style="width: 100%;"
			align="center"
		>
			<el-table-column prop="id" label="编号"> </el-table-column>
			<el-table-column
				prop="name"
				label="分类名称"
				width="120px"
				align="center"
			>
			</el-table-column>
			<el-table-column prop="level" label="级别" width="120px" align="center">
				<template slot-scope="scope">
					{{ scope.row.level | levelCase }}
				</template>
			</el-table-column>
			<el-table-column
				prop="product_count"
				label="商品数量"
				width="150px"
				align="center"
			>
			</el-table-column>
			<el-table-column
				prop="product_unit"
				label="数量单位"
				width="150px"
				align="center"
			>
			</el-table-column>
			<el-table-column label="是否显示" align="center" prop="show_status">
				<template slot-scope="scope">
					<el-switch
						v-model="scope.row.show_status"
						:active-value="1"
						:inactive-value="0"
					></el-switch>
				</template>
			</el-table-column>
			<el-table-column
				prop="sort"
				label="排序"
				align="center"
			></el-table-column>
			<el-table-column label="设置" align="center" width="120px">
				<template slot-scope="scope">
					<el-button
						size="mini"
						@click="showNextLevel(scope.row.id)"
						:disabled="scope.row.level === 1"
						>查看下级</el-button
					>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="180px" align="center">
				<template slot-scope="scope">
					<el-button size="mini" @click='handleEdit(scope.row.id)'>编辑</el-button>
					<el-button
						size="mini"
						type="danger"
						@click="handleDelete(scope.row.id)"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="listQuery.pageNum"
			:page-sizes="[5, 10, 15, 20]"
			:page-size="listQuery.pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total"
		>
		</el-pagination>
	</div>
</template>
<script>
import { deleteProductCate } from "@/api/product";
import catemixing from './catemixing';
export default {
	name: "productCate",
	data: function() {
		return {
			showType: false,
			listQuery: {
				pageSize: 5, //一页10条数据
				pageNum: 1, //当前页
				id: null,
			},
			total: 0, //总数量
			parentId: 0,
		};
	},
	filters: {
		levelCase(val) {
			let chin_list = [
				"一",
				"二",
				"三",
				"四",
				"五",
				"六",
				"七",
				"八",
				"九",
				"十",
			];
			let sn = val;
			if (sn <= 10) {
				return chin_list[sn] + "级";
			}
		},
	},
	methods: {
		handleEdit(id){
			console.log('编辑',id);
			this.$router.push("/pms/productCateupdate/" + id);
		},
		handleDelete(id) {
			console.log(id);
			this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					deleteProductCate({ id: id }).then((res) => {
						console.log("删好了");
						if (res.type == "success") {
							this.$message({
								type: "success",
								message: "删除成功!",
							});
							this.getCateList();
						}
					});
				})
				.catch(() => {
					this.$message({
						type: "info",
						message: "已取消删除",
					});
				});
		},
		getChange(val) {
			this.showType = val;
		},
		handleSizeChange(val) {
			console.log("修改每页显示的条数 触发了", val);
			this.listQuery.pageSize = val;
			this.listQuery.pageNum = 1;
			//重新获取数据
			this.getCateList();
		},
		//6.修改当前页的页码
		handleCurrentChange(val) {
			console.log("修改当前页的页码 触发了", val);
			this.listQuery.pageNum = val;
			this.getCateList();
		},
		showNextLevel(id) {
			this.parentId = id;
			this.getCateList();
		},
		addFun() {
			this.$router.push("/pms/productCateAdd");
		},
		goBackLevel() {
			this.parentId = 0;
			this.getCateList();
		},
	},
	mixins:[catemixing]
};
</script>
<style scoped lang="scss">
.product_con {
	margin: 10px;
	.product-title {
		display: flex;
		justify-content: space-between;
		border: 1px solid #ebeef5;
		height: 40x;
		line-height: 40px;
		padding: 10px;
	}
}
</style>
